<template>
    <div id="footer" class="footer">
        <div class="layout_Base">
            <el-row >
                <el-col :span="6">
                    <div class="fangda">
                        <ul style="width:170px;border-right:1px solid rgba(51,51,51,1);">
                            <span class="footer_title">房大办公</span>
                            <li @click="goBusiness">租赁指南</li>
                            <!-- <li @click="goHelp">帮助</li> -->
                            <li @click="goAbout">关于我们</li>
                            <li @click="goContact">联系我们</li>
                            <li><a href="https://zoomoffices.oss-cn-shanghai.aliyuncs.com/%E6%88%BF%E5%A4%A7%E5%8A%9E%E5%85%AC%E4%BD%BF%E7%94%A8%E5%8D%8F%E8%AE%AE.pdf" target="_blank">条款与隐私</a></li>
                        </ul>
                    </div>
                </el-col>
                <el-col :span="14">
                    <div class="space" style="border-right:1px solid rgba(51,51,51,1);">
                        <span class="footer_title">办公空间</span>
                        <el-row>
                            <el-col :span="7">
                                <div class="space_left">
                                    <ul>
                                        <li v-for="(item,index) in office_citylist" :key="index" @click="goOffice(item.id,item)">
                                            {{item.zh_name}}
                                        </li>
                                    </ul>
                                </div>
                            </el-col>
                            <el-col :span="7">
                                <div class="space_middle">
                                    <ul>
                                        <li v-for="(item,index) in old_citylist" :key="index" @click="goOffice(item.id,item)">
                                            {{item.zh_name}}
                                        </li>
                                    </ul>
                                </div>
                            </el-col>
                            <el-col :span="7">
                                <div class="space_right">
                                    <ul>
                                        <li @click="GoShareSelect(1)">中大型经理套间</li>
                                        <li @click="GoShareSelect(2)">独立单间</li>
                                        <li @click="GoShareSelect(3)">开放式工位</li>
                                        <li @click="GoShareSelects">写字楼</li>
                                    </ul>
                                </div>
                            </el-col>
                        </el-row>
                    </div>
                </el-col>
                <el-col :span="4">
                    <div class="resources" style="margin-left:72px;">
                        <ul class="">
                            <span class="footer_title">投放房源</span>
                            <a @click="moveToyz" target="_blank" style="margin-top:18px;color:#999;cursor:pointer;">立即投放</a>
                            <!-- <li @click="moveToyz">业主操作后台</li> -->
                        </ul>
                    </div>
                </el-col>
            </el-row>
        </div>
        <el-dialog  center :visible.sync="showdoc" :close-on-click-modal="false" width="1320px;margin-top:10vh">
            <div style="width：1280px;height:720px;margin:0 auto;">
                <a href="https://zoomoffices.oss-cn-shanghai.aliyuncs.com/%E6%88%BF%E5%A4%A7%E5%8A%9E%E5%85%AC%E4%BD%BF%E7%94%A8%E5%8D%8F%E8%AE%AE.pdf" width='500' height='400'></a>
            </div> 
        </el-dialog>
    </div>
</template>
<script>
import { getCityVideo } from "@/api/homepage";
import { getCitylist,getHouselist } from "@/api/office";
import { mapActions } from "vuex";
import {getCookie} from '@/api/login'

export default {
    data() {
        return {
            office_citylist:[
                {
                    id:'3',
                    zh_name:'上海'
                },
                {
                    id:'5',
                    zh_name:'北京'
                },
                {
                    id:'4',
                    zh_name:'广州'
                },
                {
                    id:'1',
                    zh_name:'深圳'
                },
                {
                    id:'10',
                    zh_name:'香港'
                },
            ],
            old_citylist:[
                {
                    id:'12',
                    zh_name:'成都'
                },
                {
                    id:'13',
                    zh_name:'重庆'
                },
                {
                    id:'28',
                    zh_name:'杭州'
                },
                {
                    id:'48',
                    zh_name:'南京'
                },
                {
                    id:'90',
                    zh_name:'西安'
                },
            ],
            showdoc:false,
            sharesobj:{
                type:'1',
                cityid:'',
                lowPerson:'',
                highPerson:'',
                ind:'-',
                city_name:'',
                lowArea:'',
                highArea:'',
                keyword:''
            },
            CityId: '',
        }
    },
    
    methods:{
        ...mapActions(['GetSearch']),
        goAbout(){
            this.$root.active_index=0
            window.localStorage.setItem('active_index',0)
            this.$router.push({path:'/home/about'})
        },
        goHelp(){
            this.$root.active_index=4
            window.localStorage.setItem('active_index',4)
            this.$router.push({path:'/home/help'})
        },
        goBusiness(){
            this.$root.active_index=2
            window.localStorage.setItem('active_index',2)
            this.$router.push({path:'/home/business/officespace?typeid=1'})
        },
        goContact(){
            this.$root.active_index=0
            window.localStorage.setItem('active_index',0)
            this.$router.push({path:'/home/contact'})
        },
        goOffice(params,item){
                window.localStorage.setItem("lowArea", 0);
                window.localStorage.setItem("highArea", 0);
                window.localStorage.setItem("type", 1);
                window.localStorage.setItem("city", item.zh_name);
                window.localStorage.setItem('cityId',params)
                window.localStorage.setItem('pageNum',1)
                window.localStorage.setItem('positionId',0)
                window.localStorage.setItem('positionType',0)
                window.localStorage.setItem('lowPrice',0)
                window.localStorage.setItem('highPrice',0)
                window.localStorage.setItem('lowPerson',0)
                window.localStorage.setItem('highPerson',0)
                window.localStorage.setItem('keyword','')
                this.$root.active_index=1
                window.localStorage.setItem('active_index',1)
                if(this.$root.moveIndex==1){
                    window.scrollTo(0,0); 
                    window.location.reload()
                }else{
                    this.$router.push({ path: "/home/office/" + params });
                      setTimeout(() => {
                        window.scrollTo(0,0); 
                    }, 500);
                }
        },
        OpenDoc(){
            this.showdoc = true;
        },
        moveToyz(){
            var tempwindow=window.open('_blank');
            tempwindow.location=window.location.protocol+'//'+'yz.zoomoffices.com';
        },
        fetchCitylist() {
            var reqParams = {
                city_name: window.sessionStorage.getItem('city')
            }
            getHouselist(reqParams).then(res => {
                    if(res.data.code == 0){
                        // this.citylists = res.data.data.city_info;
                        let arr = res.data.data.city_info;
                        for(let i =0;i<arr.length;i++){
                            if(window.sessionStorage.getItem('city') == arr[i].zh_name){
                                this.CityId = arr[i].id;
                            }
                        }
                    }else{
                        this.$message.error(res.data.msg )
                    }
                })
                .catch(error => {
                // this.$message.error("查询城市失败！");
            });
        },
        GoShareSelect(index){
            this.sharesobj.type = 1;
            if(index == 1){
                this.sharesobj.lowPerson = '50';
                this.sharesobj.highPerson = '200';
            }else if(index == 2){
                this.sharesobj.lowPerson = '1';
                this.sharesobj.highPerson = '50';
            }else if(index == 3){
                this.sharesobj.lowPerson = '0';
                this.sharesobj.highPerson = '0';
            }
            var reqParams = {
                cityId: Number(this.CityId),
                type: this.sharesobj.type,
                page: this.pageNum,
                lowPerson: Number(this.sharesobj.lowPerson),
                highPerson: Number(this.sharesobj.highPerson),
            };
            // getCitylist(reqParams).then((res)=>{
            //     if(res.data.code == 0){
            //     this.$store.dispatch('GetSearch',this.sharesobj);
                // window.sessionStorage.setItem("houses", JSON.stringify(res.data.data));
                window.localStorage.setItem("lowPerson", this.sharesobj.lowPerson);
                window.localStorage.setItem("highPerson", this.sharesobj.highPerson);
                window.localStorage.setItem("type", this.sharesobj.type);
                window.localStorage.setItem("city", window.sessionStorage.getItem("city"));
                // window.localStorage.setItem('cityId',this.CityId)
                window.localStorage.setItem('pageNum',1)
                window.localStorage.setItem('positionId',0)
                window.localStorage.setItem('positionType',0)
                window.localStorage.setItem('lowPrice',0)
                window.localStorage.setItem('highPrice',0)
                window.localStorage.setItem('lowArea',0)
                window.localStorage.setItem('highArea',0)
                window.localStorage.setItem('keyword','')

               if(this.$root.moveIndex==1){
                    window.scrollTo(0,0); 
                    window.location.reload()
                }else{
                    this.$router.push({ path: "/home/office/3"});
                      setTimeout(() => {
                        window.scrollTo(0,0); 
                    }, 500);
                }
        },

        GoShareSelects(){
            this.sharesobj.type = 2;
            this.sharesobj.lowArea = '0';
            this.sharesobj.highArea = '0';
            var reqParams = {
                cityId: Number(this.CityId),
                type: this.sharesobj.type,
                page: this.pageNum,
                lowArea: Number(this.sharesobj.lowArea),
                highArea: Number(this.sharesobj.highArea),
            };
            // getCitylist(reqParams).then((res)=>{
                // if(res.data.code == 0){
                this.$store.dispatch('GetSearch',this.sharesobj);
                // window.sessionStorage.setItem("houses", JSON.stringify(res.data.data));
                window.localStorage.setItem("lowPerson", 0);
                window.localStorage.setItem("highPerson", 0);
                window.localStorage.setItem("type", this.sharesobj.type);
                window.localStorage.setItem("city", window.sessionStorage.getItem("city"));
                // window.localStorage.setItem('cityId',this.CityId)
                window.localStorage.setItem('pageNum',1)
                window.localStorage.setItem('positionId',0)
                window.localStorage.setItem('positionType',0)
                window.localStorage.setItem('lowPrice',0)
                window.localStorage.setItem('highPrice',0)
                window.localStorage.setItem('lowArea',this.sharesobj.lowArea)
                window.localStorage.setItem('highArea',this.sharesobj.highArea)
                window.localStorage.setItem('keyword','')
                
                       
                  
                this.$root.active_index=1
               if(this.$root.moveIndex==1){
                    window.scrollTo(0,0); 
                    window.location.reload()
                }else{
                    this.$router.push({ path: "/home/office/3"});
                      setTimeout(() => {
                        window.scrollTo(0,0); 
                    }, 500);
                }
        },

        GetCityId(){
            if(window.sessionStorage.getItem('city')){
                this.fetchCitylist();
            }
        }
    },
    mounted () {
        setTimeout(() => {
            this.GetCityId();
        }, 2000);
    }       
}
</script>

<style lang="scss" scoped>
@import "../style/common.scss";
    .footer {
        width:100%;
        height:490px;
        background:rgba(3,3,3,1);
        font-family: 'Arial';
        .layout_Base{
            width:1050px;
            margin:0 auto;
            padding-top:95px;
            text-align:left;
            .footer_title{
                display:inline-block;
                font-size:24px;
                color:rgba(255,255,255,1);
                line-height:31px;
                margin-bottom:31px;
            }
            li{
                height:21px;
                font-size:16px;
                color:rgba(153,153,153,1);
                line-height:21px;
                margin-top:16px;
                &:hover{
                    color: #FFE300;
                    cursor: pointer;
                }
            }
            .footer_right{
                float:right;
            }
                  
        }
    }
    
</style>